<template>
  <div class="strut-div">
    <div class="map-nav">
      <div v-for="(nav, i) in navList" :key="i" @click="changeNav(i)">
        <p :class="{ 'nav-active': active == i }">{{ nav }}</p>
      </div>
    </div>
    <div id="amap"></div>
    <div class="mt-card-bottom"><div @click="toShanxi">进入山西农业概况</div></div>
  </div>
</template>

<script>
  import {plantFamilies,scaleBreedChart,qualityTraceabilityChart,agriculturalCooperativeChart} from '@/network/map-data.js';

export default {
  components: {},
  data() {
    return {
      map: null,
      navList: ['种植大户', '规模养殖场', '质量追溯', '农业合作社'],
      active: 0,
      markerList:[],
      infoWindow:null,
    };
  },
  mounted() {
    this.map = new AMap.Map('amap', {
      mapStyle: 'amap://styles/00db8fcabab7ab5bc41e8f3a02f8580d', //设置地图的显示样式
      center: [112.546609, 37.423674],
      zoom: 11
    });

    this.renderMap();
  },
  methods: {
    changeNav(i) {
      if (i == this.active) {
        return;
      } else {
        this.active = parseInt(i);
        this.renderMap();
      }
    },
    toShanxi(){
      this.$router.replace({
        name:"SxDigitalAgriculture"
      })
    },
    renderMap(){
      this.map.remove(this.markerList);
      this.markerList = [];
      if (this.infoWindow) {
        this.infoWindow.close();
      }
      var data;
      var _this = this;

      switch (this.active){
        case 0:
          data = plantFamilies;

          data.map(item => {
            var marker = new AMap.Marker({
              position: new AMap.LngLat(item['经度'],item['纬度']),
            })
            marker.extend = item;

            marker.on('click',function(ev){
              if (_this.infoWindow) {
                _this.infoWindow.close();
              }
              let obj = ev.target.extend;
              console.log(obj);
              let contentString = `<div class="info-window">
              <p>村名：<span>` + obj['村名'] + `</span></p>
              <p>姓名：<span>` + obj['姓名'] + `</span></p>
              <p>种类：<span>` + obj['种类'] + `</span></p>
              <p>规模(亩)：<span>` + obj['规模(亩)'] + `</span></p>
              <p>地址：<span>` + obj['地址'] + `</span></p>
              </div>`

              _this.infoWindow = new AMap.InfoWindow({
                isCustom:true,
                content:contentString,
                closeWhenClickMap:true,
              })
              _this.infoWindow.open(_this.map,new AMap.LngLat(obj['经度'],obj['纬度']))

            })
            _this.markerList.push(marker);
          })

          break;
        case 1:
          data = scaleBreedChart;
          data.map(item => {
            var marker = new AMap.Marker({
              position: new AMap.LngLat(item['经度'],item['纬度']),
            })
            marker.extend = item;

            marker.on('click',function(ev){
              if (_this.infoWindow) {
                _this.infoWindow.close();
              }
              let obj = ev.target.extend;
              console.log(obj);
              let contentString = `<div class="info-window">
              <p>姓名：<span>` + obj['姓名'] + `</span></p>
              <p>移动电话：<span>` + obj['移动电话'] + `</span></p>
              <p>养殖场户名称：<span>` + obj['养殖场户名称'] + `</span></p>
              <p>养殖场地址：<span>` + obj['养殖场地址'] + `</span></p>
              <p>养殖畜种：<span>` + obj['养殖畜种'] + `</span></p>
              <p>设计存栏规模：<span>` + obj['设计存栏规模'] + `</span></p>
              <p>设计年出栏规模：<span>` + obj['设计年出栏规模'] + `</span></p>
              </div>`

              _this.infoWindow = new AMap.InfoWindow({
                isCustom:true,
                content:contentString,
                closeWhenClickMap:true,
              })
              _this.infoWindow.open(_this.map,new AMap.LngLat(obj['经度'],obj['纬度']))
            })
            _this.markerList.push(marker);
          })
          break;
        case 2:
          data = qualityTraceabilityChart;
          data.map(item => {
            var marker = new AMap.Marker({
              position: new AMap.LngLat(item['经度'],item['纬度']),
            })
            marker.extend = item;

            marker.on('click',function(ev){
              if (_this.infoWindow) {
                _this.infoWindow.close();
              }
              let obj = ev.target.extend;
              console.log(obj);
              let contentString = `<div class="info-window">
              <p>乡镇：<span>` + obj['乡镇'] + `</span></p>
              <p>单位名称：<span>` + obj['单位名称'] + `</span></p>
              <p>单位地址：<span>` + obj['单位地址'] + `</span></p>
              <p>单位类别：<span>` + obj['单位类别'] + `</span></p>
              <p>单位负责人：<span>` + obj['单位负责人'] + `</span></p>
              <p>类型：<span>` + obj['类型'] + `</span></p>
              <p>职务：<span>` + obj['职务'] + `</span></p>
              <p>联系方式：<span>` + obj['联系方式'] + `</span></p>
              </div>`

              _this.infoWindow = new AMap.InfoWindow({
                isCustom:true,
                content:contentString,
                closeWhenClickMap:true,
              })
              _this.infoWindow.open(_this.map,new AMap.LngLat(obj['经度'],obj['纬度']))
            })
            _this.markerList.push(marker);
          })
          break;
        case 3:
          data = agriculturalCooperativeChart
          data.map(item => {
            var marker = new AMap.Marker({
              position: new AMap.LngLat(item['经度'],item['纬度']),
            })
            marker.extend = item;

            marker.on('click',function(ev){
              if (_this.infoWindow) {
                _this.infoWindow.close();
              }
              let obj = ev.target.extend;
              console.log(obj);
              let contentString = `<div class="info-window">
              <p>乡镇：<span>` + obj['乡镇'] + `</span></p>
              <p>名称：<span>` + obj['名称'] + `</span></p>
              <p>地址：<span>` + obj['地址'] + `</span></p>
              <p>主营业务：<span>` + obj['主营业务'] + `</span></p>
              <p>入股成员：<span>` + obj['入股成员'] + `</span></p>
              <p>带动农户：<span>` + obj['带动农户'] + `</span></p>
              <p>法定代表人：<span>` + obj['法定代表人'] + `</span></p>
              <p>注册资金：<span>` + obj['注册资金'] + `万元</span></p>
              </div>`

              _this.infoWindow = new AMap.InfoWindow({
                isCustom:true,
                content:contentString,
                closeWhenClickMap:true,
              })
              _this.infoWindow.open(_this.map,new AMap.LngLat(obj['经度'],obj['纬度']))
            })
            _this.markerList.push(marker);
          })
          break;
        default:
          break;
      }
      this.map.add(this.markerList);
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
  .map-nav {
  width: 579px;
  box-sizing: border-box;
  height: 42px;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 250, 255, 0.7), rgba(68, 101, 243, 0.7));
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
  border-radius: 21px;
  top: 100px;
  left: 109px;
  z-index: 999;
  padding: 0 33px;
  display: flex;
  > div {
    flex: 1;
    text-align: center;
    p {
      line-height: 42px;
      font-size: 18px;
      display: inline-block;
      &:hover {
        cursor: pointer;
      }
    }
    .nav-active {
      color: #ffc700;
      border-bottom: 2px solid #ffc700;
    }
  }
}
#amap {
  width: 745px;
  height: 780px;
  position: absolute;
  top: 70px;
  left: 30px;
}


  .mt-card-bottom {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:60px;

    >div {
      width: 421px;
      height: 64px;
      background: url(../../../assets/imgs/tg/middle-card-button.png);
      display: inline-block;
      font-size: 22px;
      line-height: 64px;
      color: #FFCB03;
      &:hover {
        cursor: pointer;
      }
    }
  }

</style>
